---
title: Accessibility
redirect_from:
  - /components/stepper/accessibility/
---

## Accessibility

The Stepper component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies.

The following props provide additional information to screen readers.

**Input field props:**

| Prop              | Type   | Description                                                                                                                                                              |
| ----------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ariaLabelValue`  | string | Specifies `aria-label` for the input field.                                                                                                                              |
| `ariaLabelledby`  | string | Specifies `aria-labelledby` for the input field, referencing the ID of the element that labels the component, ensuring that screen readers announce the label correctly. |
| `ariaDescribedby` | string | Specifies `aria-describedby` for the input field, referencing the ID of the element that describes the component, providing additional context or instructions.          |

**Buttons props:**

| Prop                   | Type   | Description                                                                                                |
| ---------------------- | ------ | ---------------------------------------------------------------------------------------------------------- |
| `titleDecrement`       | string | Specifies `aria-label` for the decrement icon button.                                                      |
| `titleIncrement`       | string | Specifies `aria-label` for the increment icon button.                                                      |
| `descriptionDecrement` | string | Specifies `aria-describedby` for the decrement icon button, referencing the ID of the descriptive element. |
| `descriptionIncrement` | string | Specifies `aria-describedby` for the increment icon button, referencing the ID of the descriptive element. |

Although these props are optional for the Stepper (StepperStateless) component itself, it is recommended to fill them in.

### Example

```jsx
<Stepper
  step={1}
  minValue={0}
  minValue={10}
  ariaLabelValue="Number of passengers"
  titleDecrement="Remove a passenger"
  titleIncrement="Add a passenger"
/>
```

The screen reader will announce the value title (`Number of passengers`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by the screen reader.

```jsx
<Stack>
  <Stack>
    <Text id="passengers">Passengers</Text>
  </Stack>
  <Stepper
    step={1}
    minValue={0}
    maxValue={10}
    ariaLabelValue="Number of passengers"
    ariaLabelledby="passengers"
    titleDecrement="Remove a passenger"
    titleIncrement="Add a passenger"
  />
</Stack>
```

This example includes `ariaLabelledby` prop. In this case, `ariaLabelledby` prop is prioritized over `ariaLabelValue`, so the screen reader will announce the value title (`Passengers`) and buttons title (`Add a passenger`, `Remove a passenger`) once they are focused by the screen reader.

```jsx
<Stack>
  <Stack>
    <Text id="adults-title">Adults</Text>
    <Text id="adults-description">Number of adults in your group</Text>
  </Stack>
  <Stepper
    step={1}
    minValue={0}
    maxValue={10}
    ariaLabelValue="Number of passengers"
    ariaLabelledby="adults-title"
    ariaDescribedby="adults-description"
    titleDecrement="Remove a passenger"
    titleIncrement="Add a passenger"
    descriptionIncrement="adults-title"
    descriptionDecrement="adults-title"
  />
</Stack>
```

This example includes `ariaLabelledby`, `descriptionIncrement` and `descriptionDecrement` props.

When decrement button is focused by screen reader, the screen reader will announce the button title (`Remove a passenger`) and complementary information (`Adults`).

For input field, the value of `ariaLabelledby` reference (`Adults`) is read first, then the complementary information (value of `ariaDescribedby` prop) is announced - `Number of adults in your group`. Value of `ariaLabelValue` is ignored.

The same logic as for decrement button is applicable for the increment button. When increment button is focused by screen reader, the screen reader will announce the button title (`Add a passenger`) and complementary information (`Adults`).
